<template>
  <div>

    <el-tabs v-model="activeName" class="tab_container" @tab-click = "load">

      <!--未审核报表页-->
      <el-tab-pane name= 0 >
        <span slot="label"><i class="el-icon-document"></i> 未审核</span>
        <!--未审核报表的列表表格-->
        <el-table :data="notCheckedTableData" :max-height="tableHeight">
          <!--表头-->
          <el-table-column type="index" width="40" align="center"></el-table-column>
          <el-table-column prop="temname" label="报表名" align="center"></el-table-column>
          <el-table-column prop="username" label="审核人" align="center"></el-table-column>
          <el-table-column prop="checkdate" label="审核日期" align="center"></el-table-column>
          <el-table-column prop="msg" label="信息" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <div class="operation_show" slot-scope="scope">
              <!--审核按钮-->
              <el-button type="success" icon="el-icon-info" @click = "check(scope.row.id)">查看</el-button>
            </div>
          </el-table-column>
        </el-table>

        <!--分页块-->
        <div>
          <el-pagination
              style="margin-top: 10px"
              align="center"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pagenum"
              :page-sizes="[10,20,30,40,50]"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
        </div>
      </el-tab-pane>

      <!--审核已通过报表页-->
      <el-tab-pane name= 2 >
        <span slot="label"><i class="el-icon-document-checked"></i> 通过</span>
        <!--审核已通过报表的列表表格-->
        <el-table :data="passTableData" :max-height="tableHeight" >
          <!--表头-->
          <el-table-column type="index" width="40" align="center"></el-table-column>
          <el-table-column prop="temname" label="报表名" align="center"></el-table-column>
          <el-table-column prop="username" label="审核人" align="center"></el-table-column>
          <el-table-column prop="checkdate" label="审核日期" align="center"></el-table-column>
          <el-table-column prop="msg" label="信息" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <div class="operation_show" slot-scope="scope">
              <!--查看当前报表信息按钮-->
              <el-button type="success" icon="el-icon-info" @click = "check(scope.row.id)">查看</el-button>
            </div>
          </el-table-column>
        </el-table>

        <!--分页块-->
        <div>
          <el-pagination
              style="margin-top: 10px"
              align="center"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pagenum"
              :page-sizes="[10,20,30,40,50]"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
        </div>
      </el-tab-pane>

      <!--审核后被退回的报表页-->
      <el-tab-pane name = 1 >
        <span slot="label"><i class="el-icon-document-delete"></i> 退回</span>
        <!--被退回的报表列表表格-->
        <el-table :data="sendBackTableData" :max-height="tableHeight">
          <!--表头-->
          <el-table-column type="index" width="40" align="center"></el-table-column>
          <el-table-column prop="temname" label="报表名" align="center"></el-table-column>
          <el-table-column prop="username" label="审核人" align="center"></el-table-column>
          <el-table-column prop="checkdate" label="审核日期" align="center"></el-table-column>
          <el-table-column prop="msg" label="信息" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <div class="operation_show" slot-scope="scope">
              <!--重新编辑报表信息按钮-->
              <el-button type="danger" icon="el-icon-edit" @click = "fillForm(scope.row.tid, scope.row.temname)" >重新编辑</el-button>
            </div>
          </el-table-column>
        </el-table>


        <!--分页块-->
        <div>
          <el-pagination
              style="margin-top: 10px"
              align="center"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pagenum"
              :page-sizes="[10,20,30,40,50]"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
        </div>
      </el-tab-pane>

    </el-tabs>


    <!--报表查看对话框-->
    <el-dialog title="报表查看" :visible.sync="checkVisible">
      <el-descriptions :column="1" :colon="false" border labelStyle="LS">
        <el-descriptions-item prop="temName" label="报表名">{{this.report.temname}}</el-descriptions-item>
        <el-descriptions-item label="部门名称">{{this.report.depname}}</el-descriptions-item>
        <el-descriptions-item label="医疗机构代码">{{this.report.hcode}}</el-descriptions-item>
        <el-descriptions-item label="医院地址">{{this.report.address}}</el-descriptions-item>
        <el-descriptions-item label="医生人数">{{this.report.doctornum}}</el-descriptions-item>
        <el-descriptions-item label="法人代表" v-if="this.report.isRepr">{{this.report.repr}}</el-descriptions-item>
        <el-descriptions-item label="医院类别" v-if="this.report.isCateg">{{this.report.categ}}</el-descriptions-item>
        <el-descriptions-item label="医院主办单位性质" v-if="this.report.isPro">{{this.report.pro}}</el-descriptions-item>
        <el-descriptions-item label="医院经济类型" v-if="this.report.isEco">{{this.report.eco}}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>


    <!--重新编辑报表对话框-->
    <el-dialog :title="this.formName" :visible.sync="fillFormVisible" width="50%" center @close = "flushC = false">
      <!--重新编辑报表表单-->
      <el-form :model="Form" ref="Form" >
        <!--部门级联选择器-->
        <el-form-item label="部门名称：" label-width="160px">
          <!--使用子组件-->
          <DepSelect v-if="flushC" ></DepSelect>
        </el-form-item>
        <!--医疗机构选择器-->
        <el-form-item  label-width="160px">
          <template slot="label">
            <el-tooltip placement="bottom" style="margin-right: 5px">
              <div slot="content">没有找到您的医疗机构？请联系管理员</div>
              <i class="el-icon-question icon-color"></i>
            </el-tooltip>
            <span>医疗机构代码：</span>
          </template>
          <HospitalSearch v-if="flushC"></HospitalSearch>
        </el-form-item>
        <!--医院地址输入框-->
        <el-form-item label="医院地址：" label-width="160px" prop="address" :rules = "{required: true, message: '请输入医院地址', trigger: 'blur'}">
          <el-input v-model="Form.address" placeholder="请输入医院地址" clearable auto-complete="off"></el-input>
        </el-form-item>
        <!--医生人数输入框-->
        <el-form-item label="医生人数：" label-width="160px" prop="doctornum" :rules = "{type: 'number',required: true, message: '请输入医生人数格式为数字', trigger: 'blur'}">
          <el-input v-model.number="Form.doctornum" placeholder="请输入医生人数" clearable auto-complete="off"></el-input>
        </el-form-item>
        <!--法人代表输入框  可选-->
        <el-form-item label="法人代表：" label-width="160px" prop="repr" v-if="reveal[0]" :rules = "{required: true, message: '请输入法人代表', trigger: 'blur'}">
          <el-input v-model="Form.repr"  placeholder="请输入法人代表" clearable autocomplete="off"></el-input>
        </el-form-item>
        <!--医院类别输入框  可选-->
        <el-form-item label="医院类别：" label-width="160px" prop="categ" v-if="reveal[1]" :rules = "{required: true, message: '请输入医院类别', trigger: 'blur'}">
          <el-input v-model="Form.categ" placeholder="请输入医院类别" clearable autocomplete="off"></el-input>
        </el-form-item>
        <!--医院主办单位性质输入框  可选-->
        <el-form-item label="医院主办单位性质：" label-width="160px"prop="pro" v-if="reveal[2]" :rules = "{required: true, message: '请输入医院主办单位性质', trigger: 'blur'}">
          <el-input v-model="Form.pro"  placeholder="请输入医院主办单位性质" clearable autocomplete="off"></el-input>
        </el-form-item>
        <!--医院经济类型输入框  可选-->
        <el-form-item  label="医院经济类型：" label-width="160px" prop="eco" v-if="reveal[3]" :rules = "{required: true, message: '请输入医院经济类型', trigger: 'blur'}">
          <el-input v-model="Form.eco" placeholder="请输入医院经济类型" clearable autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <!--重新编辑报表对话框按钮-->
      <div slot="footer">
        <!--关闭对话框按钮-->
        <el-button @click="fillFormVisible = false" type="danger">取消</el-button>
        <!--保存信息按钮-->
        <el-button type="primary" @click="saveForm">保存</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import DepSelect from "@/components/DepSelect";
import HospitalSearch from "@/components/HospitalSearch";
export default {
  name: "UserReportManage",
  components: {HospitalSearch, DepSelect},
  data(){
    return{
      tid: this.$route.params.id,
      currentPage:1,
      total:0,
      pagenum:1,
      pagesize:10,
      tableHeight:"",
      activeName: "0",
      notCheckedTableData: [],
      passTableData: [],
      sendBackTableData: [],
      flushC: false,
      checkVisible: false,
      fillFormVisible:false,
      reveal:[false,false,false,false],
      rid: null,
      formName:'',
      Form: {},
      report: {
        temname: '',
        id: null,
        tid: null,
        uid: null,
        depname: "",
        hcode: "",
        address: "",
        doctornum: null,
        repr: null,
        categ: null,
        pro: null,
        eco: null,
        isRepr: 0,
        isCateg: 0,
        isPro: 0,
        isEco: 0
      },
      LS:{
        width: '150px'
      }
    }
  },
  created() {
    this.$bus.$on('transferId',(data)=>{
      console.log('我是dl组件，收到了数据',data)
      this.Form.did = data
    })
    this.$bus.$on('transferHcode',(data)=>{
      console.log('我是hsearch组件，收到了数据',data)
      this.Form.hcode = data
    })
    this.load(); //网页创建时加载数据
    this.getTableHeight(); //网页创建时获得表格高度
  },
  mounted() {
    //挂载window.onresize事件(动态设置table高度)
    let _this = this;
    window.onresize = () => {
      if (_this.resizeFlag) {
        clearTimeout(_this.resizeFlag);
      }
      _this.resizeFlag = setTimeout(() => {
        _this.getTableHeight();
        _this.resizeFlag = null;
      }, 100);
    };
  },
  beforeDestroy() {
    this.$bus.$off('transferId')
    this.$bus.$off('transferHcode')
  },
  methods:{
    load() {
        this.request.get('/report/getByStatus', {params: {
            pagenum: this.pagenum,
            pagesize: this.pagesize,
            status: parseInt(this.activeName),
            uid: this.$store.state.id
          }}).then(res=>{
          if (this.activeName === '0')
            this.notCheckedTableData = res.data.data.records
          if (this.activeName === '1')
            this.sendBackTableData = res.data.data.records
          if (this.activeName === '2')
            this.passTableData = res.data.data.records
          this.total = res.data.data.total
        })
    },
    //查看
    check(rid){
      this.request.get("/report/getById/" + rid).then(res=>{
        if (res.data.code === '200'){
          this.report = res.data.data
          this.checkVisible = true
          this.rid = rid
        }
        else this.$message.error("请求出错")
      })
    },


    fillForm(id, name) {
      this.Form = {}
      this.flushC = true
      this.request.get('/template/getById/' + id).then(res=>{
        console.log(res);
        if (res.data.code === '200'){
          this.formName = name
          this.reveal[0] = res.data.data.isRepr
          this.reveal[1] = res.data.data.isCateg
          this.reveal[2] = res.data.data.isPro
          this.reveal[3] = res.data.data.isEco
          this.Form.id = id
          this.Form.uid = this.$store.state.id
          this.Form.temname = name
          this.fillFormVisible = true
        }
      })

    },
    //保存重新编辑
    saveForm(){
      this.$refs['Form'].validate((valid) =>{
        if(valid){
          this.request.post('/report/updateForm',this.Form).then(res=>{
            if (res.data.code === '200'){
              this.$message.success("重新编辑成功！")
              this.load()
              this.fillFormVisible = false
            }
            else
              this.$message.error(res.data.msg)
          })
        }
      })


    },


    //分页查询
    handleSizeChange(pagesize) {   //每页条数改变时触发
      console.log(pagesize)
      this.pagesize = pagesize
      this.load()
    },
    handleCurrentChange(pagenum) {   //当前页码改变时触发
      console.log(pagenum)
      this.pagenum = pagenum
      this.load()
    },

    //计算table高度(动态设置table高度)
    getTableHeight() {
      let tableH = 231; //距离页面下方的高度
      let tableHeightDetil = window.innerHeight - tableH;
      if (tableHeightDetil <= 300) {
        this.tableHeight = 300;
      } else {
        this.tableHeight = window.innerHeight - tableH;
      }
    }
  }
}
</script>

<style scoped>

/*将表格操作列设为光标停留时显示*/
.operation_show{
  display: none;
}
.el-table__body tr:hover > td .operation_show{
  display: block;
}

</style>